<template>
  <h3>案例：柱状图，可左右拖动</h3>
  <code-demo-mobile :code="htmlCode" :scriptCode="scriptCode">
    <m-chart-base :option="option"></m-chart-base>
  </code-demo-mobile>
</template>

<script setup>
import {
  gridContainLabel,
  gridLeft,
  gridRight,
  gridTop,
  gridBottom,
  axisLineColor,
  xAxisLabelColor,
  yAxisLabelColor,
  yAxisLabelMargin,
  axisPointerColor,
  splitLineColor,
  nameColor,
  nameFontSize,
  gradientColor,
  xAxisLabelMargin,
  xAxisLabelFontSize,
  yAxisLabelFontSize,
  barWidth,
  barBorderRadius,
} from 'ui-lib/components-mobile/m-chart/style'

const option = {
  grid: {
    containLabel: gridContainLabel,
    left: gridLeft,
    right: gridRight,
    top: gridTop,
    bottom: gridBottom,
  },
  tooltip: {
    trigger: 'item',
    triggerOn: 'click',
    padding: [3, 7],
    borderWidth: 0,
    textStyle: {
      fontWeight: 'bold',
      fontSize: 12,
      color: '#27243F',
    },
    formatter({ value }) {
      return `${value * 100}%`
    },
  },
  dataZoom: [
    {
      type: 'inside',
      minValueSpan: 4,
      maxValueSpan: 4,
      zoomLock: true,
    },
  ],
  xAxis: {
    type: 'category',
    data: [
      '1月',
      '2月',
      '3月',
      '4月',
      '5月',
      '6月',
      '7月',
      '8月',
      '9月',
      '10月',
      '11月',
      '12月',
      '1月',
      '2月',
      '3月',
      '4月',
      '5月',
    ],
    axisTick: {
      show: false,
    },
    axisLabel: {
      margin: xAxisLabelMargin,
      color: xAxisLabelColor,
      fontSize: xAxisLabelFontSize,
    },
    axisLine: {
      lineStyle: {
        color: axisLineColor,
      },
    },
    axisPointer: {
      lineStyle: {
        type: 'solid',
        color: axisPointerColor,
      },
    },
  },
  yAxis: [
    {
      type: 'value',
      name: '百分比',
      nameTextStyle: {
        color: nameColor,
        fontSize: nameFontSize,
        align: 'right',
        padding: [0, yAxisLabelMargin, 0, 0],
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: axisLineColor,
        },
      },
      axisLabel: {
        color: yAxisLabelColor,
        margin: yAxisLabelMargin,
        fontSize: yAxisLabelFontSize,
        formatter(value) {
          return `${value * 100}%`
        },
      },
      splitLine: {
        lineStyle: {
          color: splitLineColor,
        },
      },
    },
  ],
  series: [
    {
      name: '增长率',
      data: [
        0.04,
        0.02,
        { value: -0.03, itemStyle: { borderRadius: [0, 0, barBorderRadius, barBorderRadius] } },
        0.05,
        0.06,
        0.04,
        0.05,
        0.05,
        0.05,
        0.05,
        0.05,
        0.05,
        0.05,
        0.05,
        0.05,
        0.05,
        0.05,
      ],
      type: 'bar',
      barWidth,
      itemStyle: {
        borderRadius: [barBorderRadius, barBorderRadius, 0, 0],
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: gradientColor.purple[0] },
            { offset: 1, color: gradientColor.purple[1] },
          ],
        },
      },
    },
  ],
}

const htmlCode = `<m-chart-base :option="option"></m-chart-base>`

const scriptCode = `import {
  gridContainLabel,
  gridLeft,
  gridRight,
  gridTop,
  gridBottom,
  axisLineColor,
  xAxisLabelColor,
  yAxisLabelColor,
  yAxisLabelMargin,
  axisPointerColor,
  splitLineColor,
  nameColor,
  nameFontSize,
  gradientColor,
  xAxisLabelMargin,
  xAxisLabelFontSize,
  yAxisLabelFontSize,
  barWidth,
  barBorderRadius,
} from 'ui-lib/components-mobile/m-chart/style'

{
  grid: {
    containLabel: gridContainLabel,
    left: gridLeft,
    right: gridRight,
    top: gridTop,
    bottom: gridBottom,
  },
  tooltip: {
    trigger: 'item',
    triggerOn: 'click',
    padding: [3, 7],
    borderWidth: 0,
    textStyle: {
      fontWeight: 'bold',
      fontSize: 12,
      color: '#27243F',
    },
    formatter({ value }) {
      return \`\${value * 100}%\`
    },
  },
  dataZoom: [
    {
      type: 'inside',
      minValueSpan: 4,
      maxValueSpan: 4,
      zoomLock: true,
    },
  ],
  xAxis: {
    type: 'category',
    data: [
      '1月',
      '2月',
      '3月',
      '4月',
      '5月',
      '6月',
      '7月',
      '8月',
      '9月',
      '10月',
      '11月',
      '12月',
      '1月',
      '2月',
      '3月',
      '4月',
      '5月',
    ],
    axisTick: {
      show: false,
    },
    axisLabel: {
      margin: xAxisLabelMargin,
      color: xAxisLabelColor,
      fontSize: xAxisLabelFontSize,
    },
    axisLine: {
      lineStyle: {
        color: axisLineColor,
      },
    },
    axisPointer: {
      lineStyle: {
        type: 'solid',
        color: axisPointerColor,
      },
    },
  },
  yAxis: [
    {
      type: 'value',
      name: '百分比',
      nameTextStyle: {
        color: nameColor,
        fontSize: nameFontSize,
        align: 'right',
        padding: [0, yAxisLabelMargin, 0, 0],
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: axisLineColor,
        },
      },
      axisLabel: {
        color: yAxisLabelColor,
        margin: yAxisLabelMargin,
        fontSize: yAxisLabelFontSize,
        formatter(value) {
          return \`\${value * 100}%\`
        },
      },
      splitLine: {
        lineStyle: {
          color: splitLineColor,
        },
      },
    },
  ],
  series: [
    {
      name: '增长率',
      data: [
        0.04,
        0.02,
        { value: -0.03, itemStyle: { borderRadius: [0, 0, barBorderRadius, barBorderRadius] } },
        0.05,
        0.06,
        0.04,
        0.05,
        0.05,
        0.05,
        0.05,
        0.05,
        0.05,
        0.05,
        0.05,
        0.05,
        0.05,
        0.05,
      ],
      type: 'bar',
      barWidth,
      itemStyle: {
        borderRadius: [barBorderRadius, barBorderRadius, 0, 0],
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: gradientColor.purple[0] },
            { offset: 1, color: gradientColor.purple[1] },
          ],
        },
      },
    },
  ],
}`
</script>
